<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery.js"></script>
    <script src="../js/common.js"></script>
    <link rel="stylesheet" href="../css/callus.css">
    <script src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=UtaDPOd2sesdl6CMVNjNeX7HI7b2eP7w"></script>
</head>
<body>
<div id="top"></div>
<div>
    <div class="middle">
        <div>
            <div class="title">联系我们</div>
            <div class="callus-content">
                <div>
                    <div>
                        <div>
                            <div>
                                <div>我们会做的更好!</div>
                                <div>WE WILL DO BETTER</div>
                            </div>
                        </div>
                        <div>如果您对我们有什么建议、投诉、需求，可以通过留言告诉我们，我们会在第-时间了解并及时与您联系。</div>
                    </div>
                </div>
                <div>
                    <div id="container" class="container"></div>
                </div>
            </div>
        </div>
    </div>
</div>
<div id="foot"></div>

</body>
</html>
<script>
    // var map = new BMapGL.Map('container'); // 创建Map实例
    // map.centerAndZoom(new BMapGL.Point(104.066275,30.579256), 18); // 初始化地图,设置中心点坐标和地图级别
    // map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放
    var map = new BMapGL.Map('container');
    var point = new BMapGL.Point(104.066275,30.579256);
    map.centerAndZoom(point, 18);
    map.enableScrollWheelZoom(true);
    // 创建添加点标记

    // 创建小车图标
    var myIcon = new BMapGL.Icon("../img/hongshaoqiezi.jpg", new BMapGL.Size(52, 26));
    // 创建Marker标注，使用小车图标
    // var pt = new BMapGL.Point(116.417, 39.909);
    // var marker = new BMapGL.Marker(pt, {
    //     icon: myIcon
    // });
    var marker = new BMapGL.Marker(point,{
        icon: myIcon
    });
    map.addOverlay(marker);
    // 创建图文信息窗口
    var sContent = '<div>\n' +
        '    <div class="top">\n' +
        '        <div class="company center">\n' +
        '            <div>\n' +
        '                <div><img src="../img/logo.jpg" height="141" width="204"/></div>\n' +
        '                <div>\n' +
        '                    <div><img src="../img/phone.png" height="30" width="30"/></div>\n' +
        '                    <div>028-99999999999</div>\n' +
        '                </div>\n' +
        '            </div>\n' +
        '        </div>\n' +
        '        <div class="nav center">\n' +
        '            <div>\n' +
        '                <div onclick="location.href=\'home.html\'">网站首页</div>\n' +
        '                <div onclick="location.href=\'company.html\'">公司信息</div>\n' +
        '                <div onclick="location.href=\'news.html\'">新闻信息</div>\n' +
        '                <div onclick="location.href=\'product.html\'">产品信息</div>\n' +
        '                <div onclick="location.href=\'online.html\'">在线留言</div>\n' +
        '                <div onclick="location.href=\'callus.html\'">联系我们</div>\n' +
        '            </div>\n' +
        '        </div>\n' +
        '        <div class="ad center">\n' +
        '            <div>\n' +
        '                <div>\n' +
        '                    <div> 品味生活</div>\n' +
        '                    <div>·</div>\n' +
        '                    <div>品味美食</div>\n' +
        '                </div>\n' +
        '                <div>\n' +
        '                    <div>一壶茶沏出了生活的醇美</div>\n' +
        '                    <div>一枝花开出了生活的鲜艳</div>\n' +
        '                    <div>一首诗吟出了生活的酸辛</div>\n' +
        '                    <div> 一把火燃烧出了生活的激情</div>\n' +
        '                    <div> 一枝笔绘出了人生的五彩缤纷</div>\n' +
        '                    <div> 一首歌唱出了人生的喜怒哀惧</div>\n' +
        '                    <div>生活像五味瓶，这么酸、这么甜、这么苦、又这么竦</div>\n' +
        '                </div>\n' +
        '                <div>\n' +
        '                    <div>\n' +
        '                        <pingwei>品味</pingwei>\n' +
        '                        <bb>生活</bb>\n' +
        '                        <pingwei>品味</pingwei>\n' +
        '                        <bb>美食</bb>\n' +
        '                    </div>\n' +
        '                    <div>\n' +
        '                        <div><img src="../img/jiantou.png" height="21" width="25"/></div>\n' +
        '                        <div>某某给你生活指南</div>\n' +
        '                    </div>\n' +
        '                </div>\n' +
        '            </div>\n' +
        '        </div>\n' +
        '    </div>\n' +
        '</div>';
    var infoWindow = new BMapGL.InfoWindow(sContent);
    // marker添加点击事件
    marker.addEventListener('click', function () {
        this.openInfoWindow(infoWindow);
        // 图片加载完毕重绘infoWindow
        document.getElementById('imgDemo').onload = function () {
            infoWindow.redraw(); // 防止在网速较慢时生成的信息框高度比图片总高度小，导致图片部分被隐藏
        };
    });
</script>
